<template>
	<view>
		<!-- 个人信息 -->
		<view class="mine-info">
			<view v-if="isLogin()" class="mine-info-person">
				<view class="mine_info_person_image_level">
					<image class="mine-info-person-image" :src="userInfo.headimgurl" mode="aspectFill" @click="login"></image>
					<image v-if="userInfo && userInfo.type == 1" class="mine-info-person-level" src="../../static/mine/expert_level.png" mode="aspectFit"></image>
					<image v-if="userInfo && userInfo.type == 2" class="mine-info-person-level" src="../../static/mine/expert_super_level.png" mode="aspectFit"></image>
				</view>
				<view class="mine-info-nickname-view">
					<view class="mine-info-nickname util-font-medium">{{userInfo.nickname}}</view>
				</view>
				<view v-if="userInfo && userInfo.type != 0" class="mine-expert-workbench-view">
					<image class="mine-expert-workbench" src="../../static/mine/mine_expert_workbench.png" mode="aspectFit" @click="expertWorkbench"></image>
				</view>
			</view>
			<view v-else class="mine-info-person">
				<view class="mine_info_person_image_level">
					<image class="mine-info-person-image" src="../../static/logo_144.png" mode="aspectFill"  @click="login"></image>
				</view>
				<view class="mine-info-nickname-view">
					<view class="mine-info-nickname util-font-medium" @click="reg">点击登录</view>
				</view>
			</view>
			<view class="mine-info-money">
					
				<view v-if="isLogin() && userInfo && userInfo.type != 0">
					<view class="mine-info-redPacket" @click="redPacket">
						<view class="mine-info-redPacket-title util-font-regular">红包：</view>
						<view class="mine-info-redPacket-value util-font-medium">{{parseInt(userInfo.appRedPacket.amount)/100.}}元</view>
					</view>
					<view class="mine-info-brokerage" @click="expertWorkbench">
						<view class="mine-info-brokerage-title util-font-regular">佣金：</view>
						<view class="mine-info-brokerage-value util-font-medium">{{parseInt(userInfo.appBrokerage.amount)/100.}}元</view>
					</view>
				</view>
				<view v-else class="mine-info-redPacket0">
					<view class="mine-info-redPacket0-title util-font-regular">红包：</view>
					<view v-if="!isLogin()" class="mine-info-redPacket0-value util-font-medium">登录后可查看</view>
					<view v-else-if="userInfo && (userInfo.phone == null)" class="mine-info-redPacket0-value util-font-medium" @click="authPhoneNumber">授权手机号后可查看</view>
					<view v-else class="mine-info-redPacket0-value util-font-medium" @click="redPacket">{{parseInt(userInfo.appRedPacket.amount)/100.}}元</view>
				</view>
			</view>
		</view>

		<!-- 订单入口 -->
		<view class="mine-order">
			<view class="order-title-view">
				<view class="order-title util-font-medium">我的订单</view>
				<view class="order-all-button util-font-regular" @click="order(0)">
					<text>全部订单</text>
					<image src="../../static/mine/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="order-button-list">
				<view class="order-button-item" @click="order(1)">
					<image class="order-button-image" style="width: 70rpx;height: 70rpx;" src="../../static/mine/mine_order0.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">待支付</view>
				</view>
				<view class="order-button-item" @click="order(2)">
					<image class="order-button-image" style="width: 70rpx;height: 70rpx;" src="../../static/mine/mine_order1.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">未使用</view>
				</view>
				<view class="order-button-item" @click="order(3)">
					<image class="order-button-image" style="width: 70rpx;height: 70rpx;" src="../../static/mine/mine_order2.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">已完成</view>
				</view>
				<view class="order-button-item" @click="order(4)">
					<image class="order-button-image" style="width: 70rpx;height: 70rpx;" src="../../static/mine/mine_order3.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">取消/退款</view>
				</view>
			</view>
		</view>
		
		<!-- 商家工具 -->
		<view v-if="userInfo && userInfo.merId && userInfo.merId.length!=0" class="mine-order">
			<view class="order-title-view">
				<view class="order-title util-font-medium">商家工具</view>
			</view>
			<view class="order-button-list">
				<view class="order-button-item" @click="merchantTools(0)">
					<image class="order-button-image" src="../../static/mine/scan.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">扫码核销</view>
				</view>
				<view class="order-button-item" @click="merchantTools(1)">
					<image class="order-button-image" src="../../static/mine/takedOrder.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">已核销订单</view>
				</view>
				<view class="order-button-item">
					
				</view>
				<view class="order-button-item">
					
				</view>
			</view>
		</view>

		<!-- 达人相关 -->
		<view v-if="userInfo && userInfo.type != 0" class="mine-order">
			<view class="order-title-view">
				<view class="order-title util-font-medium">赚佣金</view>
			</view>
			<view class="order-button-list">
				<view class="order-button-item" @click="inviteFriends">
					<image class="order-button-image" src="../../static/mine/mine_expert_invite.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">邀请好友</view>
				</view>
				<view class="order-button-item" @click="myTeam">
					<image class="order-button-image" src="../../static/mine/mine_my_team.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">我的团队</view>
				</view>
				<view class="order-button-item" @click="expertWorkbench">
					<image class="order-button-image" src="../../static/mine/mine_expert_wordbrench.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">达人工作台</view>
				</view>
				<view class="order-button-item" @click="docsForCommission">
					<image class="order-button-image" src="../../static/mine/mine_commission_docs.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">返佣说明</view>
				</view>
			</view>
		</view>

		<!-- 推荐工具 -->
		<view class="mine-order">
			<view class="order-title-view">
				<view class="order-title util-font-medium">推荐工具</view>
			</view>
			<view class="order-button-list">
				<view class="order-button-item" @click="tools(0)">
					<image class="order-button-image" src="../../static/mine/mine_mer_in.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">商户入驻</view>
				</view>
				<view class="order-button-item" @click="tools(1)">
					<image class="order-button-image" src="../../static/mine/mine_service.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">联系客服</view>
				</view>
				<view class="order-button-item" @click="tools(2)">
					<image class="order-button-image" src="../../static/mine/mine_q_a.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">常见问题</view>
				</view>
				<view class="order-button-item" @click="tools(3)">
					<image class="order-button-image" src="../../static/mine/mine_protocols.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">相关协议</view>
				</view>
				<view class="order-button-item" @click="tools(4)">
					<image class="order-button-image" src="../../static/mine/mine_settings.png" mode="aspectFit"></image>
					<view class="order-button-title util-font-regular">设置</view>
				</view>
			</view>
		</view>
		
		
		<!-- 测试按钮 -->
		<!-- <button type="default" @click="test">测试按钮</button> -->
		
		<view class="placeholder-view" style="height: 20upx;">
			
		</view>
		
		
		<!-- 官方客服 -->
		<uni-popup class="" type="center" ref="contactServiceView">
			<view class="contactServiceView" @click="service">
				<view class="popup-title util-font-medium">请选择联系方式</view>
				<!-- <view class="popup-subTitle">在线客服为在线聊天方式</view> -->
				<view class="popup-button" @tap.stop="service1">微信客服</view>
				<view class="popup-button" @tap.stop="service2">电话客服</view>
				<!-- <button class="popup-button" hover-class="none" hover-stop-propagation="true" open-type="contact">在线客服</button> -->
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPop from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniPop
		},
		data() {
			return {
				userInfo: null,
				
			}
		},
		onLoad() {
			var that = this
			uni.$on("loginSuccess", function(){
				that.userInfo = uni.getStorageSync("userInfo")
			})
			uni.$on("userInfoRefresh", function(){
				that.userInfo = uni.getStorageSync("userInfo")
			})
			uni.$on("getPhoneNumberSuccess", function(){
				that.userInfo = uni.getStorageSync("userInfo")
			})
			if (this.isLogin()) {
				this.userInfo = uni.getStorageSync("userInfo")
			}
		},
		onShow() {
			if (this.isLogin()) {
				this.$urlRequest.getUserInfoById(this.userInfo.id)
			}
		},
		methods: {
			verifyLoginState: function(){
				if (!this.isLogin()) {
					this.reg()
					return false
				}
				if (!this.userInfo.phone) {
					this.getPhoneNumber()
					return false
				}
				return true
			},
			expertWorkbench: function(){
				if (!this.verifyLoginState()) {
					return
				}
				uni.navigateTo({
					url: '../workbench/workbench'
				})
			},
			redPacket: function(){
				if (!this.verifyLoginState()) {
					return
				}
				uni.navigateTo({
					url: 'redPacket/redPacket'
				})
			},
			account: function(){
				if (!this.verifyLoginState()) {
					return
				}
				uni.navigateTo({
					url: '../workbench/account'
				})
			},
			order: function(index){
				if (!this.verifyLoginState()) {
					return
				}
				uni.navigateTo({
					url: '../order/order?selectIndex=' + index
				})
			},
			inviteFriends: function(){
				if (!this.verifyLoginState()) {
					return
				}
				uni.navigateTo({
					url: '../workbench/inviteFriends'
				})
			},
			myTeam: function(){
				
				if (!this.verifyLoginState()) {
					return
				}
				uni.navigateTo({
					url: '../workbench/team'
				})
			},
			docsForCommission: function(){
				
				if (!this.verifyLoginState()) {
					return
				}

				uni.navigateTo({
					url: '../webview/webview?src=https://api.wlkjlife.cn/rebateDesc.html'
				})
			},
			merchantTools: function(index){
				switch (index){
					case 0:
					{
						if (!this.verifyLoginState()) {
							return
						}
						
						var that = this
						uni.scanCode({
							onlyFromCamera: true,
							scanType: 'qrCode',
							success(res) {
								console.log(JSON.stringify(res))
								console.log(res.path)
								if (res.path) {
									let sceneString = res.path.split("?")[1]
									let verifyCodeObject = that.$util.JSDecode(decodeURIComponent(sceneString.split('=')[1]))
									if (verifyCodeObject.CODE) {
										
										that.sendRequest({
											url: 'app/ordOrders/verifyUser',
											method: 'POST',
											header: that.$urlRequest.getHeader('token'),
											data: {
												code: verifyCodeObject.CODE,
												userId: uni.getStorageSync('userInfo').id
											},
											success: function(res){
												if (res.data.code == 0){
													uni.navigateTo({
														url: '../merchantTools/takeOrderSuccess?oid=' + res.data.data.id
													})
												}else{
													uni.showModal({
														content: ''+res.data.msg,
														showCancel: false
													});
												}
											}
										})
										
									}else{
										uni.showModal({
											content: '非核销码',
											showCancel: false
										});
									}
								}else{
									uni.showModal({
										content: '二维码错误，请重试',
										showCancel: false
									});
								}
							}
						})
					}
						break;
					case 1:
					{
						if (!this.verifyLoginState()) {
							return
						}
						
						uni.navigateTo({
							url: '../merchantTools/takedOrders'
						})
					}
						break;
					
					default:
						break;
				}
			},
			tools: function(index){
				var that = this
				switch (index){
					case 0:
					{
						uni.showModal({
							title: '商家入驻',
							content: "请添加商务客服微信号：" + that.serviceWechat + "，或拨打电话"+ that.serviceMobile +" 联系商务客服",
							confirmText: '知道了',
							cancelText: '复制微信',
							showCancel: true,
							success(res) {
								console.log(123)
								if (res.cancel) {
									uni.setClipboardData({
										data: that.serviceWechat,
										success() {
											uni.showModal({
												content: '商务客服微信号已复制',
												showCancel: false
											});
										}
									})
								}
							}
						});
					}
						break;
					case 1:
					{
						if (!this.verifyLoginState()) {
							return
						}
						
						this.$refs.contactServiceView.open()
					}
						break;
					case 2:
					{
						if (!this.verifyLoginState()) {
							return
						}
						
						uni.navigateTo({
							url: 'FAQ'
						})
					}
						break;
					case 3:
					{
						uni.navigateTo({
							url:'protocol'
						})
					}
						break;
					case 4:
					{
						if (!this.verifyLoginState()) {
							return
						}
						uni.navigateTo({
							url:'setting'
						})
					}
						break;
					
					default:
						break;
				}
			},
			service1: function(e){
				var that = this
				uni.setClipboardData({
				    data: that.serviceWechat,
				    success: function () {
						uni.showModal({
							content: '客服微信号已添加至剪贴板，请前往“微信”中添加好友后联系',
							showCancel: false
						});
				    }
				});
			},
			service2: function(){
				var that = this
				uni.makePhoneCall({
				    phoneNumber: that.serviceMobile
				});
			},
			service3: function(){
				
			},
			service: function(){
				console.log('父组件事件')
			},
			login: function(){
				if (this.isLogin()) {
					
				}else{
					this.reg()
				}
			},
			authPhoneNumber: function(){
				this.getPhoneNumber()
			},
			
			
			
			// 测试
			test: function(){
				var that = this
				uni.request({
					url: "http://192.168.0.100:8888/test/wechatPaySign",
					success: function(wxres){
						console.log(JSON.stringify(wxres))
						
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: wxres.data.data.timeStamp,
							nonceStr: wxres.data.data.nonceStr,
							package: wxres.data.data.package,
							signType: wxres.data.data.signType,
							paySign: wxres.data.data.paySign,
							success: function(payres) {
								uni.showModal({
									content: '支付成功',
									showCancel: false
								});
							},
							fail: function(err) {
								if (err.errMsg.requestPayment == 'fail cancel') {
									uni.showModal({
										content: '用户取消了支付',
										showCancel: false
									});
								} else {
									uni.showModal({
										content: '' + err.errMsg.requestPayment,
										showCancel: false
									});
								}
							}
						})
					},
					fail(err) {
						uuni.showModal({
							content: 'err:' + JSON.stringify(err),
							showCancel: false
						});
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	/* 个人信息 */
	.mine-info {
		padding: 70upx 30upx 40upx;
		background-color: #FFFFFF;

	}

	.mine-info-person {
		width: 690upx;
		height: 126upx;
	}

	.mine_info_person_image_level {
		width: 146upx;
		height: 126upx;
		position: relative;
		float: left;
	}

	.mine-info-person-image {
		width: 126upx;
		height: 126upx;
		border-radius: 63upx;
		overflow: hidden;
	}

	.mine-info-person-level {
		width: 95upx;
		height: 29upx;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.mine-info-nickname-view {
		width: 240upx;
		height: 126upx;
		overflow: hidden;
		float: left;
		margin-left: 30upx;
	}

	.mine-info-nickname {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		color: #333333;
		font-size: 38upx;
	}

	.mine-expert-workbench-view {
		width: 220upx;
		height: 126upx;
		float: right;
	}

	.mine-expert-workbench {
		width: 220upx;
		height: 68upx;
		margin-top: 29upx;
	}

	.mine-info-money {
		width: 100%;
		height: 134upx;
		margin-top: 54upx;
	}

	.mine-info-redPacket0 {
		width: 100%;
		height: 134upx;
		background-image: url(https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/mine_redPacket0_bg.png);
		background-size: cover;
		border-radius: 30upx;
		color: #333333;
		font-size: 36upx;
	}

	.mine-info-redPacket0-title {
		height: 134upx;
		line-height: 134upx;
		margin-left: 20upx;
		float: left;
	}

	.mine-info-redPacket0-value {
		height: 134upx;
		line-height: 134upx;
		float: left;
	}

	.mine-info-redPacket {
		width: 335upx;
		height: 134upx;
		background-image: url(https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/mine_redPacket_bg.png);
		background-size: cover;
		border-radius: 30upx;
		color: #333333;
		font-size: 36upx;
		float: left;
		overflow: hidden;
	}

	.mine-info-redPacket-title {
		height: 42upx;
		line-height: 42upx;
		padding: 20upx 20upx 0;
		font-size: 32upx;
	}

	.mine-info-redPacket-value {
		height: 60upx;
		line-height: 60upx;
		padding: 0 20upx;
		font-size: 40upx;
	}

	.mine-info-brokerage {
		width: 335upx;
		height: 134upx;
		background-image: url(https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/mine_brokerage_bg.png);
		background-size: cover;
		border-radius: 30upx;
		color: #333333;
		font-size: 36upx;
		float: right;
		overflow: hidden;
	}

	.mine-info-brokerage-title {
		height: 42upx;
		line-height: 42upx;
		padding: 20upx 20upx 0;
		font-size: 32upx;
	}

	.mine-info-brokerage-value {
		height: 60upx;
		line-height: 60upx;
		padding: 0 20upx;
		font-size: 40upx;
	}

	/* 订单入口 */
	/* 达人相关 */
	/* 推荐工具 */
	.mine-order {
		padding: 30upx;
		margin-top: 20upx;
		background-color: white;
	}

	.order-title-view {
		width: 100%;
		height: 46upx;
	}

	.order-title {
		float: left;
		height: 46upx;
		line-height: 46upx;
		color: #333333;
		font-size: 32upx;
	}

	.order-all-button {
		float: right;
		width: 200upx;
		height: 46upx;
		line-height: 46upx;
		text-align: right;
	}

	.order-all-button text {
		font-size: 28upx;
		color: #999999;
		margin-right: 10upx;
	}

	.order-all-button image {
		width: 13upx;
		height: 25upx;
		padding: relative;
		top: 3upx;
	}

	.order-button-list {
		width: 690upx;
		/* height: 126upx; */
		margin-top: 25upx;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.order-button-item {
		width: 140upx;
		height: 125upx;
		text-align: center;
		padding-top: 15upx;
	}

	.order-button-image {
		width: 56upx;
		height: 56upx;
	}

	.order-button-title {
		color: #333333;
		font-size: 24upx;
		height: 60upx;
		line-height: 60upx;
	}

	.contactServiceView {
		width: 500upx;
		height: 400upx;
		background-color: #FFFFFF;
		text-align: center;
		border-radius: 20rpx;
	}
	.popup-title {
		width: 100%;
		height: 40upx;
		padding-top: 30upx;
		padding-bottom: 30upx;
		color: #333333;
		font-size: 34upx;
	}
	.popup-button {
		width: 200upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border: 2upx solid #F1F1F1;
		box-sizing: border-box;
		font-size: 34upx;
		border-radius: 10rpx;
		margin: 40upx 150upx!important;
	}
	button {
		border-radius: 0;
		padding: 0;
	}
	button.popup-button {
		background-color: white;
		line-height: 80upx;
		position: static;
		margin: 0;
	}
</style>
